<template>
  <div class="social">
    <div class="social-top"></div>
    <div>
      <div class="social-left">
        <div class="social-left-menu">
          <div>已完成（663）</div>
          <div>处理中（60）</div>
          <div>全部（807）</div>
        </div>
        <div class="social-left-bar">
          <div :class="{ showUnfold: unfold }">
            <span
              v-for="item in dataBar.slice(0, 5)"
              :key="item"
              :class="{ active: active == item }"
              @click="active = item"
              >{{ item }}</span
            >
            <span
              @click="(unfold = true), (active = '收起')"
              :class="{ active: active == '收起' }"
              v-if="!unfold"
              >展开</span
            >
            <template v-if="unfold">
              <span
                v-for="item in dataBar.slice(5, dataBar.length)"
                :key="item"
                :class="{ active: active == item }"
                @click="active = item"
                >{{ item }}</span
              >

              <span
                @click="(unfold = false), (active = '展开')"
                :class="{ active: active == '展开' }"
                >收起</span
              >
            </template>
          </div>
        </div>
        <div class="social-left-content">
          <div v-for="item in 10" :key="item">
            <div>
              <p>海城街道上涂村繁荣南街36号旁垃圾堆放未清理</p>
              <p>提交人：任****</p>
              <p>中心南路102号检查发现缺少灭火器存在消防安全隐患</p>
            </div>
            <img src="../../../assets/images/beijing.jpg" />
          </div>
        </div>
      </div>
      <div class="social-right">
        <div class="social-right-top">
          <div class="item-title">数据统计</div>
          <div class="item-matter right-matter">
            <div>
              <p>85</p>
              <p>活动开展次数</p>
            </div>
            <div>
              <p>85</p>
              <p>活动开展次数</p>
            </div>
            <div>
              <p>85</p>
              <p>活动开展次数</p>
            </div>
            <div>
              <p>85</p>
              <p>活动开展次数</p>
            </div>
          </div>
        </div>
        <div class="social-right-bottom">
          <div class="item-title">民情热词</div>
          <div class="item-matter">
            <div class="world-cloud-3d">
              <div class="world-cloud-canvas-wrapper">
                <canvas id="world-cloud-canvas" ref="canvas"> </canvas>
              </div>
              <div style="display: none" id="weightTags"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img
      class="goBack"
      @click="
        () => {
          this.$router.go(-1);
        }
      "
      src="../../../assets/images/digitzation/back.png"
    />
  </div>
</template>
<script>
import autofit from "autofit.js";
import canvas from "jquery-tagcanvas";
export default {
  data() {
    return {
      unfold: false,
      active: "全部",
      dataBar: [
        "全部",
        "消防安全",
        "城市管理",
        "交通安全",
        "其他",
        "生态环境",
        "文教体育",
        "食药安全",
        "安全生产",
        "矛盾纠纷",
        "卫生健康",
        "扫黄打非",
        "困难救助",
        "老龄殡葬",
        "治安隐患",
        "工商监管",
        "治危拆违",
        "农林水利",
      ],
      wordArr: [
        {
          name: "安全生产(16)",
          color: "rgb(103, 87, 206)",
          light: true,
        },
        {
          name: "扫黄打非(15)",
          color: "rgb(129, 15, 255)",
          light: true,
        },
        {
          name: "生态环境(14)",
          color: "rgb(255, 19, 157)",
          light: true,
        },
        {
          name: "食药安全(13)",
          color: "rgb(7, 255, 188)",
          light: true,
        },
        {
          name: "卫生健康(12)",
          color: "rgb(208, 112, 78)",
          light: true,
        },
        {
          name: "文教体育(11)",
          color: "rgb(33, 255, 116)",
          light: true,
        },
        {
          name: "消防安全(10)",
          color: "rgb(27, 249, 68)",
          light: true,
        },
        {
          name: "治安隐患(9)",
          color: "rgb(150, 213, 91)",
          light: true,
        },
        {
          name: "城市管理(8)",
          color: "rgb(205, 79, 221)",
          light: true,
        },
        {
          name: "工商监管(7)",
          color: "rgb(103, 68, 222)",
          light: true,
        },
        {
          name: "交通安全(6)",
          color: "rgb(85, 56, 229)",
          light: true,
        },
        {
          name: "困难救助(5)",
          color: "rgb(63, 194, 241)",
          light: true,
        },
      ],
    };
  },

  mounted() {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: ".social",
      resize: true,
    });
    this.$nextTick(() => {
      let canvas = this.$refs.canvas; //
      canvas.width = document.getElementsByClassName(
        "world-cloud-canvas-wrapper"
      )[0].offsetWidth;
      canvas.height = document.getElementsByClassName(
        "world-cloud-canvas-wrapper"
      )[0].offsetHeight;
      this.startWorldCloud();
    });
  },
  methods: {
    startWorldCloud() {
      this.createTagListDom();
      const o = {
        maxSpeed: 0.02,
        fadeIn: 800,
        zoom: 1,
        textHeight: 25,
        textColour: null,
        depth: 0.97,
        minBrightness: 0.2,
        wheelzoom: false,
        reverse: true,
        shuffleTags: true,
        stretchX: 1.7,
        minSpeed: 0.01,
        initial: [0.05, 0.05],
      };
      // eslint-disable-next-line no-undef
      TagCanvas.Start("world-cloud-canvas", "weightTags", o);
      try {
        // 如果不是更新，说明是第一次渲染，就启动 tagcanvas, 否则就代表更新
        // eslint-disable-next-line no-undef
        if (!updateFlag) {
          // eslint-disable-next-line no-undef
          TagCanvas.Start("world-cloud-canvas", "weightTags", o);
        } else {
          // eslint-disable-next-line no-undef
          TagCanvas.Update("world-cloud-canvas");
        }
      } catch (e) {}
    },
    // 根据父组件传过来的 wordArr 创建 TagList Dom列表，放到页面中供，canvas 渲染
    // 这里后端的数组中的数据结构是一个对象 { name: 要展示的tag名字， light: true/false 据定是否要加重展示}
    createTagListDom: function () {
      const res = [...this.wordArr];
      const fragment = new DocumentFragment();
      for (let i = 0; i < res.length; i++) {
        const a = document.createElement("a");
        // 字符串长度大于10就要换行
        if (res[i].name.length > 10) {
          const charArr = res[i].name.split("");
          charArr.splice(10, 0, "<br>");
          res[i].name = charArr.join("");
        }
        a.innerHTML = res[i].name;
        a.href = "javascript:void(0)";
        // 如果是要加重展示就 设置属性为 huge 或large, 否则就设置属性为 medium 或small
        a.style.color = res[i].color;
        fragment.append(a);
      }

      // 更新 tagContainer中的 tag元素
      const tagsContainer = document.querySelector("#weightTags");
      tagsContainer.innerHTML = "";
      tagsContainer.append(fragment);
    },
  },
};
</script>
<style lang="scss" scoped>
.social {
  width: 100%;
  height: 100%;
  background: #021132;
  display: flex;
  flex-direction: column;
  &-top {
    width: 100%;
    height: 50px;
  }
  & > div:nth-child(2) {
    width: 100%;
    flex: 1;
    padding: 20px;
    display: flex;
    overflow: hidden;
  }
  &-left {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-right: 20px;
    background: url("../../../assets/images/digitzation/center2.png") no-repeat;
    background-size: 100% 100%;
    padding: 40px 40px 20px 40px;
    &-menu {
      display: flex;
      & > div {
        font-size: 24px;
        color: #fff;
        padding: 0 30px;
      }
      & > div:nth-child(1),
      & > div:nth-child(2) {
        border-right: 2px solid #fff;
      }
    }
    &-bar {
      width: 100%;
      padding: 0 40px;
      height: 80px;
      display: flex;
      align-items: center;
      position: relative;
      & > div {
        width: 800px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        & > span {
          width: 100px;
          font-size: 18px;
          display: inline-block;
          text-align: center;
          color: #fff;
          padding: 5px 0px;
          box-sizing: border-box;
          background: #00c6ea;
          margin-right: 10px;
          border-radius: 10px;
        }
        .active {
        }
      }
      .showUnfold {
        position: absolute;
        top: 13px;
        background: #00318b;
        padding: 10px;
        overflow: hidden;
        border-radius: 10px;
        & > span {
          margin-bottom: 10px;
        }
      }
    }
    &-content {
      width: 100%;
      padding: 0 10px;
      flex: 1;
      overflow: auto;
      & > div {
        display: flex;
        height: 200px;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #00c6ea;
        border-radius: 10px;
        margin-bottom: 10px;
        & > div:nth-child(1) {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          color: #fff;
          & > p:nth-child(1) {
            font-size: 26px;
          }
        }
        & > img {
          width: 400px;
          height: 100%;
        }
      }
    }
  }
  &-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    &-top {
      width: 100%;
      flex: 1;
      margin-bottom: 20px;
      background: url("../../../assets/images/digitzation/center2.png")
        no-repeat;
      background-size: 100% 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      .right-matter {
        padding: 20px 20px 0 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 20px;
        & > div {
          background-size: 60% 70%;
          background-repeat: no-repeat;
          color: #fff;
          background-position: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          position: relative;
          & > p:nth-child(1) {
            font-size: 40px;
            position: absolute;
            top: 70px;
          }
          & > p:nth-child(2) {
            font-size: 18px;
            font-weight: bold;
          }
        }
        & > div:nth-child(1) {
          background-image: url("../../../assets/images/digitzation/bg.png");
        }
        & > div:nth-child(2) {
          background-image: url("../../../assets/images/digitzation/bg1.png");
        }
        & > div:nth-child(3) {
          background-image: url("../../../assets/images/digitzation/bg2.png");
        }
        & > div:nth-child(4) {
          background-image: url("../../../assets/images/digitzation/bg3.png");
        }
      }
    }
    &-bottom {
      flex: 1;
      width: 100%;
      background: url("../../../assets/images/digitzation/center2.png")
        no-repeat;
      background-size: 100% 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
    }
    .item-title {
      width: 100%;
      height: 30px;
      font-size: 18px;
      line-height: 30px;
      color: #fff;
      padding-left: 10px;
      background: url("../../../assets/images/digitzation/line.png") no-repeat;
      background-size: 100% 100%;
    }
    .item-matter {
      width: 100%;
      flex: 1;
    }
  }
}
.world-cloud-3d {
  width: 100%;
  height: 100%;
  padding: 20px;
  // border: 1px solid red;
  .world-cloud-canvas-wrapper {
    width: 100%;
    height: 100%;
    #world-cloud-canvas {
      width: 100%;
      height: 100%;
    }
  }
}
#weightTags {
  font-size: 18px;
}
#huge {
  font-size: 30px;
  color: rgb(98, 203, 235);
}
#large {
  font-size: 25px;
  color: rgb(98, 203, 235, 0.6);
}
#medium {
  font-size: 20px;
  color: rgb(98, 203, 235, 0.4);
}
#small {
  font-size: 15px;
  color: rgb(98, 203, 235, 0.2);
}

.social-left-content::-webkit-scrollbar-track {
  background: #021132;
}

.social-left-content::-webkit-scrollbar-thumb {
  background: #3486da;
}
.social-left-content::-webkit-scrollbar-thumb:hover {
  background: #fff;
}
</style>
